import { useEffect, useRef } from 'react';
import videojs from 'video.js';
// 样式文件注意要加上
import 'video.js/dist/video-js.css';

const RTSPToHLSPlayer = (props: { rtspUrl?: string; hlsUrl: string }) => {
  const { hlsUrl } = props;
  const videoNode: any = useRef(null);
  let player: any = null;

  useEffect(() => {
    player = videojs(
      videoNode.current,
      {
        // video.js options here
        controls: true,
        preload: 'auto',
        // ...
      },
      function onPlayerReady() {
        console.log('Player is ready');
      },
    );

    // dispose the player when the component will unmount
    return () => {
      if (player) {
        player.dispose();
      }
    };
  }, []);

  return (
    <div data-vjs-player>
      <video
        ref={videoNode}
        className="video-js"
        controls
        preload="auto"
        style={{ width: '100%', height: '100%' }}
      >
        {/* <source src={hlsUrl} type="application/x-mpegURL" /> */}
        <source src={hlsUrl} type="rtsp/flv" />
      </video>
    </div>
  );
};

export default RTSPToHLSPlayer;
